<template>
	<view class="zai-box">
		<image src="../../../static/logo.png" mode='aspectFit' class="zai-logo"></image>
		<!-- <view class="zai-title">LOGO区域</view> -->
		<view class="zai-form">
			<input class="zai-input" placeholder-class placeholder="请输入用户名/手机号码" v-model="username"/>
			<input class="zai-input" placeholder-class password placeholder="请输入密码" v-model="password"/>
			<view class="zai-label">忘记密码？</view>
			<button class="zai-btn" @click="login">立即登录</button>
			<navigator url="../pages/register/register2" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
			<view class="zai-label">默认帐号：1234  密码：123456
			</view>
		</view>
	</view>
</template>

<script>
	import {login} from '@/api/mine.js'
	export default {
		data() {
			return {
				username:'',//帐号
				mobile:'',//手机号码
				password:'',//密码
				code:'',//验证码
				token:''//token码
			}
		},
		methods:{
			login(){
				if(this.username==null){
					uni.showToast({
						title:'请输入用户名或者手机号码'
					})
				}
				if(this.password==null){
					uni.showToast({
						title:"请输入密码"
					})
				}
				login({
					account:this.username,
					password:this.password
				}).then(res=>{
					console.log('login',res)
					uni.setStorageSync('token', res.data.token);
					this.token=uni.getStorageSync('token')
					console.log(this.token)
					uni.navigateTo({
						url:'/pages/Mine/personal/personal3'
					})
				})
			}
		}
		}
		
</script>

<style>
	.zai-box{
		padding: 0 100rpx;
		position: relative;
	}
	.zai-logo{
		
		margin-top: 50rpx;
		/* border-radius: 50%; */
		/* top: 50%; */
		/* text-align: center; */
		height: 240rpx;
		width: 100%;
	}
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360rpx;
		font-size: 68rpx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100rpx;
	}
	.zai-form{
		margin-top: 120rpx;
	}
	.zai-input{
		background: #e2f5fc;
		margin-top: 30rpx;
		border-radius: 100rpx;
		padding: 20rpx 40rpx;
		font-size: 36rpx;
	}
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #00C049;
		color: #fff;
		border: 0;
		border-radius: 100rpx;
		font-size: 36rpx;
	}
	.zai-btn:after{
		border: 0;
	}
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1rpx, 1rpx);
	}
</style>
